import { CustomerInfo } from "@/pages/index/type";
import { Fragment } from "react";
import { View, Image, Text, Button } from "@tarojs/components";
import { FC, navigateTo } from "@tarojs/taro";
import { HIcon } from "@/components";
import dayjs from "dayjs";
import styles from "./index.module.less";
import { IMG_HOST } from "@/constants/host";

interface Props {
  list: CustomerInfo[];
}

const List: FC<Props> = ({ list }) => {
  return (
    <View className={styles["list-wrapper"]}>
      {list.map((item) => (
        <Fragment key={item.id}>
          <View
            className={styles["item-wrapper"]}
            onClick={() =>
              navigateTo({
                url: `/pages/member-detail/index?id=${item.id}`,
              })
            }
          >
            {/* require("@/assets/img/people.png") */}
            <Image
              mode="widthFix"
              src={IMG_HOST + item.headImg}
              className={styles["img"]}
            />
            <View className={styles["item-content"]}>
              <View className={styles["title"]}>
                <View className={styles["name"]}>{item.nickName}</View>
                <HIcon
                  className={styles["icon"]}
                  type={item.gender === "1" ? "nan" : "nv"}
                  color={item.gender === "1" ? "#EA5073" : "#4EA7FB"}
                ></HIcon>
                {item.certificationState === "1" && (
                  <HIcon
                    type="zhuanjifenshimingrenzheng"
                    color="#FB9B1F"
                  ></HIcon>
                )}
              </View>
              <View className={styles["label"]}>
                <Text className={styles["text"]}>{item.age}岁</Text>
                <Text className={styles["text"]}>{item.height}cm</Text>
                <Text className={styles["text"]}>{item.educationCn}</Text>
                <Text className={styles["text"]}>{item.annualSalaryCn}</Text>
              </View>
              <View className={styles["label"]}>
                {/* <Text className={styles["text"]}>{item.profession}</Text> */}
                <Text className={styles["text"]}>{item.marriageHistoryCn}</Text>
              </View>
            </View>
            <View className={styles["btn"]}>联系Ta</View>
          </View>
        </Fragment>
      ))}
      <View className={styles["hint"]}>
        <View>没有更多哦~</View>
      </View>
    </View>
  );
};

export default List;
